<template>
  <div>
    <el-popover placement="left-end" width="500" trigger="click">
      <div class="chat_box">
        <div class="chat_box_l heig">
          123
        </div>
        <div class="chat_box_r heig">
          123
        </div>
      </div>
      <div slot="reference" class="sever_box" v-domDrag>
        <div class="sever_box_top">我是小天才客服助理</div>
      </div>
    </el-popover>
  </div>
</template>
<script>
export default {
  data() {
    return {

    }
  },
  mounted() {

  },
  computed: {

  },
  methods: {

  },
}
</script>
<style lang='less' scoped>
.sever_box {
  width: 100px;
  height: 100px;
  text-align: center;
  // background: #f36d6d;
  background-image: url("@/assets/image/service.gif");
  background-size: 100% 100%;
  color: #000000;
  border-radius: 30px;
  position: fixed;
  right: 10px;
  bottom: 10%;

  .sever_box_top {
    position: absolute;
    top: -35px;
  }
}

.chat_box {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  .chat_box_l{
    width: 100%;
    background: red;
  }
  .chat_box_r{
    width: 100%;
    background: blue;
  }
}
.heig{
  height: 35px;
}
</style>
